<template>
  <HeadTail></HeadTail>
  <div class="a">
    <div class="a-name">
      <h1>商品名称：{{ list.productName }}</h1>
    </div>
    <div class="a-tp">
      <div class="tp overflow-hidden h-1/2">
        <img :src="img[1]" alt="" class="w-full" />
      </div>
      <div class="tp-h1">
        <h1>{{ list.name }}</h1>
        <p class="xl:text-[25px]">{{ list.description }}</p>
      </div>
    </div>
    <div class="a-type">
      <div class="a-type-h1">选择类型：</div>
      <button @click="makersure1" id="wm">外卖</button>
      <button @click="makersure2" id="ts">堂食</button>
    </div>
    <div class="a-order">
      <button @click="tohome">取消订单</button>
      <button @click="gotothe">确认订单</button>
    </div>
  </div>
</template>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
const router = useRouter();
let isRed = ref(false);
let noRed = ref(false);
const route = useRoute();
let list = ref([]);
let img = ref([]);
let dining = ref("");
function makersure1() {
  dining.value = "外卖";
  document.getElementById("wm").style.backgroundColor = "red";
  document.getElementById("ts").style.backgroundColor = "#fdc14b";
  isRed.value = true;
  noRed.value = false;
}
function makersure2() {
  dining.value = "堂食";
  document.getElementById("ts").style.backgroundColor = "red";
  document.getElementById("wm").style.backgroundColor = "#fdc14b";
  noRed.value = true;
  isRed.value = false;
}
function gotothe() {
  if (isRed.value == true) {
    router.push({
      name: "takeOut",
      query: {
        type: JSON.stringify(dining.value),
        orderdata: JSON.stringify(list.value),
        whoid: iduser.value,
      },
    });
  } else if (noRed.value == true) {
    router.push({
      name: "tangshi",
      query: {
        type: JSON.stringify(dining.value),
        orderdata: JSON.stringify(list.value),
        whoid: iduser.value,
      },
    });
  }
}
function tohome() {
  router.push("Nhome");
}
let iduser = ref();
onMounted(() => {
  list.value = JSON.parse(route.query.listArr);
  img.value = list.value.img.split(",");
  iduser.value = route.query.personid;
  console.log(iduser.value);
});
</script>
<style lang="scss" scoped>
@import "@/components/zhouq/orDer/index.scss";
</style>
